import { _decorator, Color, Component, director, instantiate, Label, Layout, Node, Prefab, Quat, Size, Slider, UITransform, Vec3 } from 'cc';
import { eItem } from './eItem';
import { eSlider } from './eSlider';
import { eToggle } from './eToggle';
import { eMenu } from './eMenu';
import { eEdit } from './eEdit';
const { ccclass, property, executeInEditMode } = _decorator;
const _tempQuat = new Quat();

@ccclass('EasyGroup')
export class eGroup extends Component {

    @property(Node)
    arrow:Node = null
    @property(Prefab)menuItem: Prefab;
    @property(Prefab)sliderItem: Prefab;
    @property(Prefab)toggleItem: Prefab;
    @property(Prefab)groupItem: Prefab;
    @property(Prefab)editItem: Prefab;
    @property(Label)nameLabel:Label;

    private _size: Size = new Size(200, 30);
    private _item: eItem = null;
    private _isVisible: boolean = true;
    private _groupName =""
    public parentComp:eMenu;

    set size(v) {
        this._size = v;
        this.setMenuNode();
    }
    get size() {
        return this._size;
    }


    set groupName(v){
        this._groupName = v;
        this.nameLabel.string = v;
    }

    getParent(){
        return this.parentComp as eMenu;
    }

    addGroup(name: string):eGroup {
        const item = instantiate(this.groupItem);
        const easyGroup = item.getComponent(eGroup);
        easyGroup.size = this.size        
        item.parent = this.node;
        if(name){
            easyGroup.groupName = name
        }
        easyGroup.parentComp  = this.getParent();
        return easyGroup;
    }

    addSlider(name: string, cb?: (progress:number)=>void,value?:number,scale=1):eGroup {
        const item = instantiate(this.sliderItem);
        const tranform = item.getComponent(UITransform);
        tranform.height = this._size.height;
        tranform.width = this._size.width;
        item.parent = this.node;
        const sliderItem = item.getComponent(eSlider);
        sliderItem.slider.progress = value/scale;
        sliderItem.editbox.string = ""+value;
        sliderItem && sliderItem.init(name,cb,scale);
        return this;
    }
    /**
     * @Description: 
     * @param {string} name
     * @param {string} editbox
     * @param {function} cb
     * @return {*}
     */
    addEdit(name: string,editbox:string|number, cb?: (input:string)=>void):eGroup {
        const item = instantiate(this.editItem);
        const tranform = item.getComponent(UITransform);
        tranform.height = this._size.height;
        tranform.width = this._size.width;
        item.parent = this.node;
        const editItem = item.getComponent(eEdit);
        editItem && editItem.init(name,editbox,cb);
        return this;
    }
    addItem(name: string, cb?: Function):eGroup {
        const item = instantiate(this.menuItem);
        const tranform = item.getComponent(UITransform);
        tranform.height = this._size.height;
        tranform.width = this._size.width;
        item.parent = this.node;
        const menuItem = item.getComponent(eItem);
        menuItem && menuItem.init(name, cb);
        return this;
    }
    addToggle(name: string, cb?: (bool:boolean)=>void):eGroup {
        const item = instantiate(this.toggleItem);
        const tranform = item.getComponent(UITransform);
        tranform.height = this._size.height;
        tranform.width = this._size.width;
        item.parent = this.node;
        const toggleItem = item.getComponent(eToggle);
        toggleItem && toggleItem.init(name, cb);
        return this;
    }

    setMenuNode() {
        this.resetSize(this.node);
        const children = this.node.children;
        if (children.length > 0) {
            children.forEach((c) => {
                this.resetSize(c);
            })
        }
   }

    resetSize(node) {
        const tranform = node.getComponent(UITransform);
        tranform && tranform.setContentSize(this._size);
    }
    resetItem(item: eItem) {
        if (this._item != item && this._item) this._item.onNormal();
        this._item = item;
    }
    changeVisible() {
        this._isVisible = !this._isVisible;
        const children  = this.node.children;
        this.arrow.rotation = Quat.fromAngleZ(_tempQuat,(this._isVisible?-90:0));
        for(var i=1;i<children.length;i++){
            children[i].active = this._isVisible;
        }
    }
}

